<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MBTI推荐书单</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/wordcloud@1.2.2/src/wordcloud2.min.js"></script>
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
        }
        
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        
        .yellow-bg {
            background-color: #fef08a;
        }
        
        .purple-bg {
            background-color: #e9d5ff;
        }
        
        .green-bg {
            background-color: #bbf7d0;
        }
        
        .blue-bg {
            background-color: #bfdbfe;
        }
        
        .title-text {
            font-family: 'Comic Sans MS', cursive;
            font-weight: 800;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .wordcloud-container {
            width: 100%;
            height: 400px;
            margin: 0 auto;
            position: relative;
        }
        
        .mbti-type {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .mbti-type:hover {
            transform: scale(1.05);
        }
    </style>
</head>
<body class="min-h-screen">
    <!-- 导航条 -->
    <nav class="bg-white shadow-sm sticky top-0 z-50 p-4">
        <div class="container mx-auto flex items-center justify-between">
            <div class="text-2xl font-bold title-text text-indigo-600">
                MBTI推荐书单
            </div>
        </div>
    </nav>

    <!-- 主页 -->
    <main id="home" class="container mx-auto py-8 px-4">
        <div class="text-center mb-12">
            <h1 class="text-4xl font-bold mb-4 title-text">MBTI推荐书单</h1>
            <p class="text-lg text-gray-600">发现适合你性格类型的书籍</p>
        </div>

        <!-- MBTI类型分区 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
            <!-- 黄色分区 -->
            <div class="yellow-bg rounded-xl p-6 card-hover">
                <h2 class="text-xl font-bold mb-4">探索者</h2>
                <div class="grid grid-cols-2 gap-4">
                    <div class="mbti-type bg-yellow-100 rounded-lg p-3 text-center" onclick="selectMBTI('ISTP')">ISTP</div>
                    <div class="mbti-type bg-yellow-100 rounded-lg p-3 text-center" onclick="selectMBTI('ISFP')">ISFP</div>
                    <div class="mbti-type bg-yellow-100 rounded-lg p-3 text-center" onclick="selectMBTI('ESTP')">ESTP</div>
                    <div class="mbti-type bg-yellow-100 rounded-lg p-3 text-center" onclick="selectMBTI('ESFP')">ESFP</div>
                </div>
            </div>
            
            <!-- 紫色分区 -->
            <div class="purple-bg rounded-xl p-6 card-hover">
                <h2 class="text-xl font-bold mb-4">思想家</h2>
                <div class="grid grid-cols-2 gap-4">
                    <div class="mbti-type bg-purple-100 rounded-lg p-3 text-center" onclick="selectMBTI('INTJ')">INTJ</div>
                    <div class="mbti-type bg-purple-100 rounded-lg p-3 text-center" onclick="selectMBTI('INTP')">INTP</div>
                    <div class="mbti-type bg-purple-100 rounded-lg p-3 text-center" onclick="selectMBTI('ENTJ')">ENTJ</div>
                    <div class="mbti-type bg-purple-100 rounded-lg p-3 text-center" onclick="selectMBTI('ENTP')">ENTP</div>
                </div>
            </div>
            
            <!-- 绿色分区 -->
            <div class="green-bg rounded-xl p-6 card-hover">
                <h2 class="text-xl font-bold mb-4">理想家</h2>
                <div class="grid grid-cols-2 gap-4">
                    <div class="mbti-type bg-green-100 rounded-lg p-3 text-center" onclick="selectMBTI('INFJ')">INFJ</div>
                    <div class="mbti-type bg-green-100 rounded-lg p-3 text-center" onclick="selectMBTI('INFP')">INFP</div>
                    <div class="mbti-type bg-green-100 rounded-lg p-3 text-center" onclick="selectMBTI('ENFJ')">ENFJ</div>
                    <div class="mbti-type bg-green-100 rounded-lg p-3 text-center" onclick="selectMBTI('ENFP')">ENFP</div>
                </div>
            </div>
            
            <!-- 蓝色分区 -->
            <div class="blue-bg rounded-xl p-6 card-hover">
                <h2 class="text-xl font-bold mb-4">守护者</h2>
                <div class="grid grid-cols-2 gap-4">
                    <div class="mbti-type bg-blue-100 rounded-lg p-3 text-center" onclick="selectMBTI('ISTJ')">ISTJ</div>
                    <div class="mbti-type bg-blue-100 rounded-lg p-3 text-center" onclick="selectMBTI('ISFJ')">ISFJ</div>
                    <div class="mbti-type bg-blue-100 rounded-lg p-3 text-center" onclick="selectMBTI('ESTJ')">ESTJ</div>
                    <div class="mbti-type bg-blue-100 rounded-lg p-3 text-center" onclick="selectMBTI('ESFJ')">ESFJ</div>
                </div>
            </div>
        </div>

        <div class="text-center">
            <button onclick="showAllWordclouds()" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-6 rounded-lg transition-colors">
                查看全部书单
            </button>
        </div>
    </main>

    <!-- 输入页 -->
    <section id="input-page" class="container mx-auto py-8 px-4 hidden">
        <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
            <h2 class="text-2xl font-bold mb-6 text-center" id="mbti-title"></h2>
            
            <div class="mb-6">
                <p class="text-gray-600 text-center mb-4" id="prompt-text"></p>
                <input type="text" id="book-input" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="输入书名">
            </div>
            
            <div class="flex justify-between">
                <button onclick="backToHome()" class="text-gray-600 hover:text-indigo-600 font-medium py-2 px-4 rounded-lg transition-colors">
                    返回
                </button>
                <button onclick="submitBook()" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition-colors">
                    提交
                </button>
            </div>
        </div>
    </section>

    <!-- 结果页 -->
    <section id="result-page" class="container mx-auto py-8 px-4 hidden">
        <div class="bg-white rounded-xl shadow-md overflow-hidden p-6">
            <h2 class="text-2xl font-bold mb-6 text-center" id="result-title"></h2>
            
            <div class="wordcloud-container mb-6" id="wordcloud"></div>
            
            <div class="text-center">
                <button onclick="backToHome()" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-lg transition-colors">
                    返回首页
                </button>
            </div>
        </div>
    </section>

    <!-- 全部词云页 -->
    <section id="all-wordclouds" class="container mx-auto py-8 px-4 hidden">
        <div class="text-center mb-8">
            <h2 class="text-2xl font-bold mb-2">16种MBTI类型书单</h2>
            <button onclick="backToHome()" class="text-indigo-600 hover:text-indigo-800 font-medium">
                <i class="fas fa-arrow-left mr-1"></i> 返回首页
            </button>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <!-- 这里会动态生成16个词云 -->
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-gray-100 py-6 mt-12">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="text-gray-500 text-sm">
                    <p>created by <a href="https://space.coze.cn" class="text-indigo-600 hover:text-indigo-800">coze space</a></p>
                    <p>页面内容均由 AI 生成，仅供参考</p>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // 默认书单数据
        const defaultBookData = {
            "ISTJ": ["《高效能人士的七个习惯》", "《金字塔原理》", "《时间管理手账》", "《整理的艺术》", "《清单革命》", "《管理的实践》", "《财务自由之路》", "《法律人的思维方式》"],
            "ISFJ": ["《非暴力沟通》", "《爱的五种语言》", "《人性的弱点》", "《共情的力量》", "《为何家会伤人》", "《护理的艺术》", "《心流：最优体验心理学》", "《被讨厌的勇气》", "《少有人走的路》", "《亲密关系》"],
            "INFJ": ["《自卑与超越》", "《活出生命的意义》", "《悉达多》", "《人类简史》", "《沉思录》", "《乌合之众》", "《爱的艺术》", "《当尼采哭泣》", "《瓦尔登湖》", "《少有人走的路》"],
            "INTJ": ["《思考，快与慢》", "《原则》", "《战略思维》", "《黑天鹅》", "《创新者的窘境》", "《第五项修炼》", "《失控：全人类的最终命运和结局》", "《复杂：诞生于秩序与混沌边缘的科学》", "《哥德尔、艾舍尔、巴赫》", "《物种起源》"],
            "ISTP": ["《黑客与画家》", "《摩托车维修艺术》", "《枪炮、病菌与钢铁》", "《万物解释者》", "《精益创业》", "《极限挑战：户外生存手册》", "《创客》", "《思考的乐趣》", "《机械原理图解》", "《游戏设计艺术》"],
            "ISFP": ["《艺术的故事》", "《写出我心》", "《音乐即自由》", "《设计中的设计》", "《追风筝的人》", "《小王子》", "《感官觉醒》", "《自然观察笔记》", "《诗歌手册》", "《旅行，人生最有价值的投资》"],
            "INFP": ["《小王子》", "《牧羊少年奇幻之旅》", "《瓦尔登湖》", "《苏菲的世界》", "《安徒生童话全集》", "《夜航西飞》", "《一间自己的房间》", "《当呼吸化为空气》", "《心是孤独的猎手》", "《挪威的森林》"],
            "INTP": ["《思考的技术》", "《哥德尔、艾舍尔、巴赫》", "《哲学的故事》", "《时间简史》", "《复杂：诞生于秩序与混沌边缘的科学》", "《认知心理学》", "《量子物理史话》", "《逻辑哲学论》", "《系统之美》", "《三体》"],
            "ESTP": ["《影响力》", "《引爆点》", "《硬球：政治是这样玩的》", "《谈判力》", "《创业维艰》", "《即兴演讲》", "《运动改造大脑》", "《风险投资游戏》", "《快速决策》", "《野蛮生长》"],
            "ESFP": ["《人性的优点》", "《即兴的智慧》", "《娱乐至死》", "《沟通的艺术》", "《表演的艺术》", "《快乐竞争力》", "《派对策划指南》", "《时尚简史》", "《美食，祈祷，恋爱》", "《幽默沟通学》"],
            "ENFP": ["《创意的生成》", "《演讲的力量》", "《人类群星闪耀时》", "《牧羊少年奇幻之旅》", "《写出我心》", "《设计心理学》", "《乌合之众》", "《斜杠青年》", "《拖延心理学》", "《如何改变世界》"],
            "ENTP": ["《异类》", "《怪诞行为学》", "《反脆弱》", "《批判性思维工具》", "《创新的扩散》", "《离经叛道》", "《未来简史》", "《魔鬼经济学》", "《自私的基因》", "《达芬奇笔记》"],
            "ESTJ": ["《卓有成效的管理者》", "《领导梯队》", "《执行力》", "《团队协作的五大障碍》", "《关键对话》", "《高效能人士的七个习惯》", "《目标》", "《制度是如何形成的》", "《战略落地》", "《精益管理实践》"],
            "ESFJ": ["《人性的弱点》", "《非暴力沟通》", "《如何赢得朋友及影响他人》", "《爱的五种语言》", "《共情力》", "《团队正能量》", "《仪式感》", "《家庭关系疗法》", "《社区营造指南》", "《志愿服务管理》"],
            "ENFJ": ["《领导力》", "《共情的力量》", "《高效能人士的七个习惯》", "《如何说孩子才会听》", "《给予者》", "《变革的力量》", "《演讲的力量》", "《教育心理学》", "《社会性动物》", "《影响力》"],
            "ENTJ": ["《孙子兵法》", "《竞争战略》", "《从优秀到卓越》", "《领导力》", "《管理的实践》", "《硬球：政治是这样玩的》", "《权力与影响力》", "《基业长青》", "《战争论》", "《决策与判断》"]
        };

        // 存储MBTI类型和书籍数据
        let currentMBTI = '';
        const bookData = JSON.parse(localStorage.getItem('mbtiBooks')) || {};
        
        // 初始化默认数据
        Object.keys(defaultBookData).forEach(type => {
            if (!bookData[type]) {
                bookData[type] = defaultBookData[type];
            }
        });
        localStorage.setItem('mbtiBooks', JSON.stringify(bookData));
        
        const prompts = [
            "作为[MBTI]，我最爱看的一本书是：",
            "作为[MBTI]，我最难忘的一本书是：",
            "作为[MBTI]，此生一定要读的一本书是："
        ];
        
        // 选择MBTI类型
        function selectMBTI(type) {
            currentMBTI = type;
            document.getElementById('home').classList.add('hidden');
            document.getElementById('input-page').classList.remove('hidden');
            
            // 设置标题和随机提示
            document.getElementById('mbti-title').textContent = type;
            const randomPrompt = prompts[Math.floor(Math.random() * prompts.length)].replace('[MBTI]', type);
            document.getElementById('prompt-text').textContent = randomPrompt;
        }
        
        // 返回首页
        function backToHome() {
            document.getElementById('home').classList.remove('hidden');
            document.getElementById('input-page').classList.add('hidden');
            document.getElementById('result-page').classList.add('hidden');
            document.getElementById('all-wordclouds').classList.add('hidden');
        }
        
        // 提交书籍
        function submitBook() {
            const bookName = document.getElementById('book-input').value.trim();
            if (!bookName) return;
            
            // 添加书名号
            const formattedBook = bookName.startsWith('《') ? bookName : `《${bookName}》`;
            
            // 存储数据
            if (!bookData[currentMBTI]) {
                bookData[currentMBTI] = [];
            }
            bookData[currentMBTI].push(formattedBook);
            localStorage.setItem('mbtiBooks', JSON.stringify(bookData));
            
            // 显示结果页
            showResult(currentMBTI);
        }
        
        // 显示结果
        function showResult(type) {
            document.getElementById('input-page').classList.add('hidden');
            document.getElementById('result-page').classList.remove('hidden');
            
            document.getElementById('result-title').textContent = `${type} 推荐书单`;
            
            // 生成词云
            setTimeout(() => {
                generateWordcloud(type, 'wordcloud');
            }, 100);
        }
        
        // 显示所有词云
        function showAllWordclouds() {
            document.getElementById('home').classList.add('hidden');
            document.getElementById('all-wordclouds').classList.remove('hidden');
            
            const container = document.querySelector('#all-wordclouds .grid');
            container.innerHTML = '';
            
            const allTypes = ['ISTP', 'ISFP', 'ESTP', 'ESFP', 'INTJ', 'INTP', 'ENTJ', 'ENTP', 
                             'INFJ', 'INFP', 'ENFJ', 'ENFP', 'ISTJ', 'ISFJ', 'ESTJ', 'ESFJ'];
            
            allTypes.forEach(type => {
                const div = document.createElement('div');
                div.className = 'bg-white rounded-lg shadow p-4';
                div.innerHTML = `
                    <h3 class="text-lg font-medium mb-3 text-center">${type}</h3>
                    <div class="wordcloud-container h-64" id="wordcloud-${type}"></div>
                `;
                container.appendChild(div);
                
                setTimeout(() => {
                    generateWordcloud(type, `wordcloud-${type}`);
                }, 100);
            });
        }
        
        // 生成词云
        function generateWordcloud(type, containerId) {
            const container = document.getElementById(containerId);
            container.innerHTML = '';
            
            // 获取该类型的书籍数据
            const books = bookData[type] || [];
            
            if (books.length === 0) {
                container.innerHTML = '<p class="text-gray-500 text-center py-8">暂无数据</p>';
                return;
            }
            
            // 计算词频
            const wordCount = {};
            books.forEach(book => {
                wordCount[book] = (wordCount[book] || 0) + 1;
            });
            
            // 转换为词云需要的格式
            const wordList = Object.keys(wordCount).map(word => [word, wordCount[word] * 10]);
            
            // 生成词云
            WordCloud(container, {
                list: wordList,
                gridSize: 8,
                weightFactor: 1,
                fontFamily: 'Arial, sans-serif',
                color: getColorForType(type),
                backgroundColor: '#ffffff',
                rotateRatio: 0,
                rotationSteps: 2,
                drawOutOfBound: false
            });
        }
        
        // 根据MBTI类型获取颜色
        function getColorForType(type) {
            if (['ISTP', 'ISFP', 'ESTP', 'ESFP'].includes(type)) return '#ca8a04';
            if (['INTJ', 'INTP', 'ENTJ', 'ENTP'].includes(type)) return '#7e22ce';
            if (['INFJ', 'INFP', 'ENFJ', 'ENFP'].includes(type)) return '#16a34a';
            return '#1d4ed8';
        }
        
        // 初始化页面
        document.addEventListener('DOMContentLoaded', () => {
            // 检查是否有直接跳转的词云页
            if (window.location.hash === '#all-wordclouds') {
                showAllWordclouds();
            }
        });
    </script>
</body>
</html>